import { defineComponent, h } from 'vue';
import { useUploadStore } from '../../../src/stores/uploadStore';
import { useStitchingStore } from '../../../src/stores/stitchingStore';
import { useRestorationStore } from '../../../src/stores/restorationStore';

// Mock ImageUploader component
export const MockImageUploader = defineComponent({
  name: 'ImageUploader',
  setup() {
    const uploadStore = useUploadStore();
    
    const handleUpload = async (files: File[]) => {
      await uploadStore.uploadImages(files);
    };
    
    return () => h('div', { class: 'image-uploader' }, [
      h('button', {
        class: 'upload-button',
        onClick: () => {
          // Simulate file upload
          const files = [
            new File(['test'], 'test1.jpg', { type: 'image/jpeg' }),
            new File(['test'], 'test2.png', { type: 'image/png' })
          ];
          handleUpload(files);
        }
      }, 'Upload Images')
    ]);
  }
});

// Mock ImageGallery component
export const MockImageGallery = defineComponent({
  name: 'ImageGallery',
  setup() {
    const uploadStore = useUploadStore();
    
    return () => h('div', { class: 'image-gallery' }, [
      ...uploadStore.images.map(image => 
        h('div', { class: 'image-thumbnail', key: image.id }, [
          h('img', { src: image.url, alt: image.name }),
          h('button', {
            class: 'remove-button',
            onClick: () => uploadStore.removeImage(image.id)
          }, 'Remove')
        ])
      )
    ]);
  }
});

// Mock StitchingControls component
export const MockStitchingControls = defineComponent({
  name: 'StitchingControls',
  setup() {
    const uploadStore = useUploadStore();
    const stitchingStore = useStitchingStore();
    
    const handleStitch = async () => {
      await stitchingStore.stitchImages({
        arrangement: 'grid',
        spacing: 0,
        maxWidth: 12000,
        maxHeight: 12000,
        backgroundColor: '#ffffff'
      });
    };
    
    return () => h('div', { class: 'stitching-controls' }, [
      h('button', {
        class: 'stitch-button',
        disabled: uploadStore.images.length === 0,
        onClick: handleStitch
      }, 'Stitch Images')
    ]);
  }
});

// Mock StitchedImageViewer component
export const MockStitchedImageViewer = defineComponent({
  name: 'StitchedImageViewer',
  setup() {
    const stitchingStore = useStitchingStore();
    
    return () => h('div', { class: 'stitched-image-viewer' }, [
      stitchingStore.stitchedImage && h('img', {
        class: 'stitched-image',
        src: stitchingStore.stitchedImage.url,
        alt: 'Stitched Image'
      }),
      stitchingStore.stitchedImage && h('button', {
        class: 'download-button',
        onClick: () => stitchingStore.downloadStitchedImage(
          stitchingStore.stitchedImage!,
          'png',
          0.9
        )
      }, 'Download Image'),
      stitchingStore.metadata && h('button', {
        class: 'download-metadata-button',
        onClick: () => stitchingStore.downloadMetadata(stitchingStore.metadata!)
      }, 'Download Metadata')
    ]);
  }
});

// Mock RestorationControls component
export const MockRestorationControls = defineComponent({
  name: 'RestorationControls',
  setup() {
    const restorationStore = useRestorationStore();
    
    const handleUploadImage = async (file: File) => {
      restorationStore.stitchedImageFile = file;
      if (restorationStore.metadata) {
        await restorationStore.validateMetadata(file, restorationStore.metadata);
      }
    };
    
    const handleUploadMetadata = async (file: File) => {
      try {
        // In JSDOM, File.text() is not implemented, so we'll mock it
        const metadata = {
          version: '1.0',
          timestamp: Date.now(),
          stitchedImageSize: { width: 300, height: 150 },
          backgroundColor: '#ffffff',
          images: [
            { id: 'test-1', name: 'test1.jpg', x: 0, y: 0, width: 100, height: 100, format: 'jpg' },
            { id: 'test-2', name: 'test2.png', x: 100, y: 0, width: 200, height: 150, format: 'png' }
          ]
        };
        
        restorationStore.metadata = metadata;
        if (restorationStore.stitchedImageFile) {
          await restorationStore.validateMetadata(restorationStore.stitchedImageFile, restorationStore.metadata);
        }
      } catch (error) {
        console.error('Invalid metadata format:', error);
      }
    };
    
    const handleRestore = async () => {
      if (restorationStore.stitchedImageFile && restorationStore.metadata) {
        await restorationStore.restoreImages();
      }
    };
    
    return () => h('div', { class: 'restoration-controls' }, [
      h('button', {
        class: 'upload-image-button',
        onClick: () => {
          // Simulate file upload
          const file = new File(['test'], 'stitched.jpg', { type: 'image/jpeg' });
          handleUploadImage(file);
        }
      }, 'Upload Stitched Image'),
      h('button', {
        class: 'upload-metadata-button',
        onClick: () => {
          // Simulate metadata upload
          const metadata = {
            version: '1.0',
            timestamp: Date.now(),
            stitchedImageSize: { width: 300, height: 150 },
            backgroundColor: '#ffffff',
            images: [
              { id: 'test-1', name: 'test1.jpg', x: 0, y: 0, width: 100, height: 100, format: 'jpg' },
              { id: 'test-2', name: 'test2.png', x: 100, y: 0, width: 200, height: 150, format: 'png' }
            ]
          };
          const file = new File([JSON.stringify(metadata)], 'metadata.json', { type: 'application/json' });
          handleUploadMetadata(file);
        }
      }, 'Upload Metadata'),
      h('button', {
        class: 'restore-button',
        disabled: !restorationStore.validationResult?.valid,
        onClick: handleRestore
      }, 'Restore Images'),
      restorationStore.validationResult?.message && !restorationStore.validationResult.valid && 
        h('div', { class: 'error-message' }, restorationStore.validationResult.message)
    ]);
  }
});

// Mock RestoredImagesViewer component
export const MockRestoredImagesViewer = defineComponent({
  name: 'RestoredImagesViewer',
  setup() {
    const restorationStore = useRestorationStore();
    
    return () => h('div', { class: 'restored-images-viewer' }, [
      ...restorationStore.restoredImages.map(image => 
        h('div', { class: 'restored-image-container', key: image.id }, [
          h('img', {
            class: 'restored-image',
            src: image.url,
            alt: image.name
          }),
          h('button', {
            class: 'download-button',
            onClick: () => restorationStore.downloadRestoredImage(image)
          }, 'Download')
        ])
      ),
      restorationStore.restoredImages.length > 0 && h('button', {
        class: 'download-all-button',
        onClick: () => restorationStore.downloadAsZip()
      }, 'Download All')
    ]);
  }
});

// Mock App component
export const MockApp = defineComponent({
  name: 'App',
  setup() {
    const uploadStore = useUploadStore();
    const stitchingStore = useStitchingStore();
    const restorationStore = useRestorationStore();
    
    return () => h('div', { class: 'app' }, [
      h(MockImageUploader),
      h(MockImageGallery),
      h(MockStitchingControls),
      h(MockStitchedImageViewer),
      h(MockRestorationControls),
      h(MockRestoredImagesViewer)
    ]);
  }
});